<template>
  <div class="container">
    <div class="app-container">
      <el-row type="flex">
        <el-col class="header" style=" ">楼宇名称:
          <el-input v-model="buildingParams.name" size="mini" style="width: 200px; margin: 20px 10px 0 0;" placeholder="请输入楼宇名称" />
          <el-button type="primary" size="mini" @click="getBuildingList">查询</el-button>
        </el-col>
      </el-row>
      <el-row style="margin: 20px 0 20px 20px;">
        <el-button size="small" type="primary" @click="addBuilding">
          添加楼宇
        </el-button>
      </el-row>
      <el-table v-loading="loading" :data="list">
        <el-table-column width="150" label="序号" type="index" :index="indexFn">
          <!-- <template slot-scoped="scope">
            <span>{{ (buildingParams.page-1)*buildingParams.pageSize + $scopedSlots.$index + 1 }}</span>
          </template> -->
        </el-table-column>
        <el-table-column width="250" label="楼宇名称" prop="name" />
        <el-table-column width="200" label="层数" prop="floors" />
        <el-table-column width="200" label="在管面积(m²)" prop="area" />
        <el-table-column width="200" label="物业费(元/m²)" prop="propertyFeePrice" />
        <el-table-column width="200" label="状态" prop="status">
          <template v-slot="{row}">
            <span> {{ row.status === 1 ? '租赁中' : '空闲中' }} </span>
          </template>
        </el-table-column>
        <el-table-column width="200" label="操作" prop="demoFlag">
          <template #default="{row}">
            <el-button type="text" @click="getBuildingDetail(row.id)">编辑</el-button>
            <el-button type="text" @click="delBuilding(row.id)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <el-row type="flex" justify="end">
        <el-pagination
          layout="prev, pager, next, jumper, total"
          :total="total"
          :page-size="buildingParams.pageSize"
          :current-page="buildingParams.page"
          @current-change="changePage"
        />
      </el-row>
    </div>

    <!-- 弹窗 -->
    <el-dialog :title="changeTitle" :visible="showDialog" width="600px" @close="btnCancel">
      <el-form ref="form" :model="addForm" :rules="addRules" style="margin: 0 70px;">
        <el-form-item label="楼宇名称" prop="name">
          <el-input v-model="addForm.name" size="mini" placeholder="请输入楼宇名称" />
        </el-form-item>
        <el-form-item label="楼宇层数" prop="floors">
          <el-input-number
            v-model.number="addForm.floors"
            controls-position="right"
            :min="1"
            :max="20"
            type="number"
            size="mini"
            placeholder="请输入楼宇层数"
            style="width: 100%;"
          />
        </el-form-item>
        <el-form-item label="在管面积" prop="area">
          <el-input v-model.number="addForm.area" size="mini" placeholder="请输入在管面积">
            <template slot="append">m²</template>
          </el-input>
        </el-form-item>
        <el-form-item label="物业费" prop="propertyFeePrice">
          <el-input v-model.number="addForm.propertyFeePrice" size="mini" placeholder="请输入物业费">
            <template slot="append">元/m²</template>
          </el-input>
        </el-form-item>
      </el-form>
      <template #footer>
        <el-row>
          <el-button size="small" @click="btnCancel">取消</el-button>
          <el-button size="small" type="primary" @click="btnOK">确认</el-button>
        </el-row>
      </template>
    </el-dialog>
  </div>
</template>
<script>
import { addBuildingApi, delBuildingApi, getBuildingDetailApi, getBuildingListApi, updateBuildingApi } from '@/api'

export default {
  name: 'Building',
  data() {
    return {
      loading: false,
      showDialog: false,
      list: [],
      total: 0,
      buildingParams: {
        name: '',
        page: 1,
        pageSize: 10
      },
      id: null,
      addForm: {
        name: '',
        floors: 0,
        area: '',
        propertyFeePrice: null
      },
      addRules: {
        name: [
          { required: true, message: '楼宇名称不能为空', trigger: 'blur' },
          {
            trigger: 'blur',
            validator: async(rule, value, callback) => {
              const { rows } = await getBuildingListApi()
              // console.log(await getBuildingListApi())
              if (this.id) {
                console.log(this.id)
                // list.filter(item => item.id !== this.addForm.id).some(item => item.code === value) ? callback(new Error(`当前部门已有${value}编码`)) : callback()
                rows.filter(item => item.id !== this.id).some(item => item.name === value) ? callback(new Error(`当前部门已有${value}名称`)) : callback()
              } else {
                rows.some(item => item.name === value) ? callback(new Error(`当前部门已有${value}名称`)) : callback()
              }
            }
          }
        ],
        floors: [
          { required: true, message: '楼宇层数不能为空', trigger: 'blur' }
        // {
        //   trigger: 'blur',
        //   validator: (rule, value, callback) => {
        //     debugger
        //     // if(isNaN(value))
        //     if (typeof value !== 'number') {
        //       callback(new Error('楼宇层数只能写数字'))
        //     } else {
        //       callback()
        //     }
        //   }
        // },
        // { min: 1, max: 20, message: '楼宇层数范围是1-20', trigger: 'blur' }
        ],
        area: [
          { required: true, message: '在管面积不能为空', trigger: 'blur' },
          {
            trigger: 'blur',
            message: '',
            validator: (rule, value, callback) => {
              if ((typeof value) !== 'number') {
                callback(new Error('在管面积只能写数字'))
                this.addForm.area = null
                // console.log(typeof this.addForm.area)
              } else {
                callback()
              }
            }
          }
        ],
        propertyFeePrice: [
          { required: true, message: '物业费不能为空', trigger: 'blur' },
          {
            trigger: 'blur',
            message: '物业费只能写数字',
            validator: (rule, value, callback) => {
              if ((typeof value) !== 'number') {
                callback(new Error('物业费只能写数字'))
                this.addForm.propertyFeePrice = null
              } else {
                callback()
              }
            }
          }
        ]
      }
    }
  },
  computed: {
    changeTitle() {
      // console.log(this.addForm.id)

      let msg = ''
      if (this.id) {
        msg = '编辑楼宇'
      } else {
        msg = '添加楼宇'
      }
      return msg
    }
  },
  created() {
    this.getBuildingList()
  },
  methods: {
    // 获取列表
    async getBuildingList() {
      this.loading = true
      const { total, rows } = await getBuildingListApi(this.buildingParams)
      this.list = rows
      this.total = total
      this.loading = false
    },
    // 修改当前页码
    changePage(newPage) {
      this.buildingParams.page = newPage
      this.getBuildingList()
    },
    // 修改序号
    indexFn(index) {
      // debugger
      const page = this.buildingParams.page
      const pagesize = this.buildingParams.pageSize
      return (page - 1) * pagesize + index + 1
    },
    // 添加楼宇
    addBuilding() {
      this.showDialog = true
    },
    // 取消按钮
    btnCancel() {
      this.addForm = {
        name: '',
        floors: 0,
        area: null,
        propertyFeePrice: null
      }
      this.id = null
      this.$refs.form.resetFields()
      this.showDialog = false
    },
    // 确认按钮
    async btnOK() {
      await this.$refs.form.validate()
      if (this.addForm.id) {
        // 编辑
        // await updateBuildingApi({ id: this.id, ...this.addForm })

        await updateBuildingApi({ id: this.id,
          name: this.addForm.name,
          floors: this.addForm.floors,
          area: this.addForm.area,
          propertyFeePrice: this.addForm.propertyFeePrice
        })
        this.$message.success('修改楼宇成功')
      } else {
        // 新增
        await addBuildingApi(this.addForm)
        this.$message.success('新增楼宇成功')
      }
      this.btnCancel()
      this.getBuildingList()
    },
    async delBuilding(id) {
      await this.$confirm('确认要删除该楼宇吗')
      await delBuildingApi(id)
      this.$message.success('删除成功')
      this.getBuildingList()
    },
    async getBuildingDetail(id) {
      this.showDialog = true
      const res = await getBuildingDetailApi(id)
      this.addForm = res
      this.id = res.id
      // console.log(this.id)
    }

  }

}
</script>
<style scoped>
.app-container {
  padding: 20px;
  margin: 15px 10px;
}
.header {
  border-bottom: 1px solid #dedfe1;
  padding-bottom: 20px;
}

</style>
